<template>
	<view class="main">
		<view class="record">
			<view class="menstrual">
				<view class="title">
					<img src="../../static/icon_img/menstrual.png" alt="" />
					 <text space="emsp" >经期到访</text>
				</view>
				<view class="message">
					<view style="border-radius: 15rpx;background-color: #DBDBDB;width: 168rpx;height: 50rpx;display: flex;flex-direction: row;">
						 <button class="yes" :style="{ background:buttonYes }" @click="menstrualYes">是</button>
						 <button class="no" :style="{ background:buttonNo }" @click="menstrualNo">否</button>
					</view>
					<!-- <button style="height: 50rpx;">是</button> -->
				</view>
			</view>
			<view class="flow">
				<view class="title">
					<img src="../../static/icon_img/flow.png" alt="" />
					 <text space="emsp" >流量</text>
				</view>
				<view class="message">
					<radio-group @change="radioChange">
						<label class="" 
						v-for="(item, index) in flowitems" 
						:key="item.value"
						 style="display: flex;flex-direction: row;padding-bottom: 10rpx;"
						>
								<view>
									<radio :value="item.value" :checked="index === current"  />
								</view>
								<view>{{item.name}}</view>
							</label>
					</radio-group>
				</view>
			</view>
			<view class="color">
				<view class="title">
					<img src="../../static/icon_img/color.png" alt="" />
					 <text space="emsp" >颜色</text>
				</view>
				<view class="message">
					<view class="coloritem" v-for="(img,index) in colorimages" :key="index">
						<img :src="img.src" style="width: 38rpx;height: 38rpx;margin-right: 15rpx;" alt="">
					</view>
				</view>
			</view>
			<view class="dysmenorrhea">
				<view class="title">
					<img style="width: 24rpx;height: 38rpx;margin-left: 7rpx; margin-right: 25rpx;" src="../../static/icon_img/dysmenorrhea.png" alt="" />
					 <text space="emsp" >痛经</text>
				</view>
				<view class="message">
					<view class="dysmenorrheaitem" v-for="(img,index) in dysmenorrheaimages" :key="index">
						<img :src="img.src" style="width: 38rpx;height: 38rpx;margin-right: 15rpx;" alt="">
					</view>
				</view>
			</view>
			<view class="feeling">
				<view class="title">
					<img src="../../static/icon_img/feeling.png" alt="" />
					 <text space="emsp" >心情&其他症状</text>
				</view>
				<view class="message">
					<textarea @blur="bindTextAreaBlur"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
			menstrual:false,
			flow:'verySmallAmount',
			buttonYes:'rgb(219, 219, 219)',
			buttonNo:'rgb(248, 104, 83)',
			colorimages:[
				{ src: '../../static/icon_img/color1.png', color:'1', alt: 'image1' },
				{ src: '../../static/icon_img/color2.png', color:'2', alt: 'image2' },
				{ src: '../../static/icon_img/color3.png', color:'3', alt: 'image3' },
				{ src: '../../static/icon_img/color4.png', color:'4', alt: 'image4' },
				{ src: '../../static/icon_img/color5.png', color:'5', alt: 'image5' }
			],
			dysmenorrheaimages:[
				{ src: '../../static/icon_img/flow1.png', flow:'1', alt: 'image1' },
				{ src: '../../static/icon_img/flow2.png', flow:'2', alt: 'image2' },
				{ src: '../../static/icon_img/flow3.png', flow:'3', alt: 'image3' },
				{ src: '../../static/icon_img/flow4.png', flow:'4', alt: 'image4' },
				{ src: '../../static/icon_img/flow5.png', flow:'5', alt: 'image5' }
			],
            flowitems: [
				{value: 'verySmallAmount',name: '非常少量',checked: 'true'},
                {value: 'verySmallAmount',name: '少量'},
				{value: 'mediumAmount',name: '中量'},
				{value: 'largeAmount',name: '大量'},
				{value: 'veryLargeAmount',name: '非常大量'}
                
            ],
        }
    },
    methods: {
        radioChange: function(evt) {
			// this.flow = this.item.value;
            for (let i = 0; i < this.items.length; i++) {
                if (this.items[i].value === evt.detail.value) {
                    this.current = i;
                    break;
                }
            }
		},
			menstrualYes:function(){
				this.menstrual=true;
				this.buttonYes='rgb(248, 104, 83)';
				this.buttonNo='rgb(219, 219, 219)';
			},
			menstrualNo:function(){
				this.menstrual=false;
				console.log(this.menstrual);
				this.buttonYes='rgb(219, 219, 219)';
				this.buttonNo='rgb(248, 104, 83)';
			}
        }
}
</script>

<style scoped lang="scss">
	
	.main{
		width: 750rpx;
		display: flex;
		flex-direction: row-reverse;
		// background: red;
		// height: 1050rpx;
		// margin: 10rpx 30rpx 0 30rpx;
		// border-radius: 20rpx;
	}
	.record{
		width: 690rpx;
		height: 950rpx;
		border-radius: 20rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		// align-items: center; 
		margin: 20rpx auto;
		border: #DBDBDB solid 0.5rpx;;
		.title{
			width: 320rpx;
			margin-top: 28rpx;
			margin-left: 41rpx;
			display: flex;
			text{
				text-align: center;
			}
			img{
				width: 39rpx;
				height: 38rpx;
				margin-right: 18rpx;
			}
		}
		.menstrual{
			height: 97rpx;
			border-bottom: #DBDBDB solid 0.5rpx;
			display: flex;
			flex-direction: row;
			.message{
				display: flex;
				flex-direction: column;
				width: 100rpx;
				height: 50rpx;
				margin: 25rpx auto;
				 // width: 50rpx;
				 // height: 20rpx;
				 .yes{
					 width: 85rpx;
					 height:50rpx;
					 border-radius: 18rpx;
					 background-color: #DBDBDB;
					 color: #FFFFFF;
				 }
				 .no{
					 width: 85rpx;
					 height:50rpx;
					 border-radius: 18rpx;
					 background: #F86853;
					 color: #FFFFFF;
				 }
			}
		}
		.flow{
			height: 325rpx;
			border-bottom: #DBDBDB solid 0.5rpx;
			display: flex;
			flex-direction: row;
			.message{
				margin: auto 20rpx;

				display: flex;
				flex-direction: column;
				// margin: 28rpx ;
				 // width: 50rpx;
				 // height: 20rpx;
				 // background-color: black;
			}
		}
		.color{
			height: 89rpx;
			border-bottom: #DBDBDB solid 0.5rpx;
			display: flex;
			flex-direction: row;
			.message{
				display: flex;
				flex-direction: row;
				margin-left: 40rpx;
				// margin: 28rpx ;
				 // width: 50rpx;
				 // height: 20rpx;
				 .coloritem{
					 display: flex;
					 flex-direction: row;
					 margin: auto;
				 }
				 
			}
		}
		.dysmenorrhea{
			height: 89rpx;
			border-bottom: #DBDBDB solid 0.5rpx;
			display: flex;
			flex-direction: row;
			.message{
				display: flex;
				flex-direction: row;
				margin-left: 40rpx;
				// margin: 28rpx ;
				 // width: 50rpx;
				 // height: 20rpx;
				 .dysmenorrheaitem{
					 display: flex;
					 flex-direction: row;
					 margin: auto;
				 }
				 
			}
		}
		.feeling{
			height: 350rpx;
			display: flex;
			flex-direction: column;
			.message{
				margin: 28rpx ;
				// width: 50rpx;
				// height: 20rpx;
				// border: 1px solid black;
				// border-radius: 15rpx;
				display: flex;
				justify-content: center;
				textarea{
					width: 530rpx;
					height: 150rpx;
					border: 1px solid #DBDBDB;
					border-radius: 15rpx;
				}
			}
		}
	}
	
</style>
